<meta charset="UTF-8">
<button onclick="yi()">1</button>
<button onclick="er()">2</button>
<button onclick="san()">3</button>
<button onclick="si()">4</button>
<button onclick="wu()">5</button>
<button onclick="da()">放大</button>
<button onclick="xiao()">缩小</button>
<button onclick="wqian()">上一张</button>
<button onclick="hou()">下一张</button>
<button onclick="zhuan()">旋转</button>


<hr/>

<img width="400"
     id="pic"
     style="transition: all 1s"
     src="1.jpg" />

<script>
    var deg = 0;
    var i = 1;
    function yi() {
        pic.src = "1.jpg"
        i = 1;
    }

    function er() {
        pic.src = "2.jpg"
        i = 2;
    }

    function san() {
        pic.src = "3.jpg"
        i = 3;
    }

    function si() {
        pic.src = "4.jpg"
        i = 4;
    }

    function wu() {
        pic.src = "5.jpg"
        i = 5;
    }

    function da() {
        if (pic.width <= 650){
            pic.width = pic.width * 1.1;
        }

    }

    function xiao() {
        if (pic.width >= 200){
            pic.width = pic.width * 0.9;
        }
    }

    function wqian() {
        switch (true) {
            case i == 1:
                pic.src = "5.jpg"
                i = 5;
                break;
            case i == 2:
                pic.src = "1.jpg"
                i = 1;
                break;
            case i == 3:
                pic.src = "2.jpg"
                i = 2;
                break;
            case i == 4:
                pic.src = "3.jpg"
                i = 3;
                break;
            case i == 5:
                pic.src = "4.jpg"
                i = 4;
                break;
        }
    }

    function hou() {
        switch (true) {
            case i == 1:
                pic.src = "2.jpg"
                i = 2;
                break;
            case i == 2:
                pic.src = "3.jpg"
                i = 3;
                break;
            case i == 3:
                pic.src = "4.jpg"
                i = 4;
                break;
            case i == 4:
                pic.src = "5.jpg"
                i = 5;
                break;
            case i == 5:
                pic.src = "1.jpg"
                i = 1;
                break;
        }
    }

    function zhuan() {
        deg += 90;
        pic.style.transform = "rotate("+deg+"deg)";
    }
</script>